<template>
  <span ref="scrollIntoView"></span>
  <div class="item-box">
    <div v-if="store.childModel.id !== 0" class="child-content" :class="{ 'child-content-loop': route.meta.loopType }">
      <component :is="getchild" v-if="childShow" />
    </div>
    <div class="next-box">
      <div class="next-left" @click="nextChild(1)">
        <div class="next-item" :class="{ 'item-hd': !getIsStart }">
          <img :src="publicUrls + 'customized/zjz/nextarrowLeft.png'" alt="" />
          上一单元
        </div>
      </div>
      <div class="next-right" @click="nextChild(2)">
        <div class="next-item" :class="{ 'item-hd': !getIsEnd }">
          下一单元
          <img :src="publicUrls + 'customized/zjz/nextarrowRight.png'" alt="" />
        </div>
      </div>
    </div>
  </div>
  <NavVue @top="top" :flag="true"></NavVue>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'templateItemChild',
});
</script>
<script setup lang="ts">
import { publicUrls } from '@/utils/minxin';
import { pathList, pathListLoop } from '../route';
import templateText from '@/components/templateText/templateText.vue';
import { urls } from '@/utils/request/upload';
import { ref, watch, computed, onMounted, nextTick, onActivated, onDeactivated } from 'vue';
import titles from '@/components/title/title.vue';
import heardTitle from './heardTitle.vue';
import itemChild2 from './itemChild2.vue';
import itemChild1 from './itemChild1.vue';
import { useRoute, useRouter } from 'vue-router';
import NavVue from './wapComponents/nav.vue';
import { storeToRefs } from 'pinia';
import { useProjectStore } from '@/store';

const store = useProjectStore();
const route = useRoute();
const router = useRouter();
const { childModel, styleInfo, childParent } = storeToRefs(store);
// //console.log(store.childModel);
const moduleList = ref({});
const scrollIntoView = ref(null);
const childShow = ref(true);
const getchild = computed(() => {
  // //console.log('children', childModel.value.children);

  if (store.childModel?.children?.length > 0) {
    return itemChild2;
  } else {
    return itemChild1;
  }
});
const getIsEnd = computed(() => {
  if (childModel.id === 0 || childParent.id === 0) {
    return false;
  }
  //判断下一个单元是否显示
  let indexs = store.childParent.children.findIndex((el) => {
    return el.id === store.childModel.id;
  });
  if (indexs === store.childParent.children.length - 1) {
    return false;
  }
  return true;
});
const getIsStart = computed(() => {
  if (childModel.id === 0 || childParent.id === 0) {
    return false;
  }
  //判断是否显示上一个单元
  let indexs = store.childParent.children.findIndex((el) => {
    return el.id === store.childModel.id;
  });
  if (indexs === 0) {
    return false;
  }
  return true;
});
const nextChild = (type: number) => {
  let indexs = store.childParent.children.findIndex((el) => {
    return el.id === store.childModel.id;
  });
  if (indexs == -1) {
    return;
  }
  if (type === 1) {
    if (indexs === 0) {
      return;
    }

    store.setchildModel(store.childParent.children[indexs - 1]);
    top(true);
  } else {
    if (indexs === store.childParent.children.length - 1) {
      return;
    }
    store.setchildModel(store.childParent.children[indexs + 1]);
    // store.childModel = store.childParent.children[indexs - 1];
    top(true);
  }
};
const top = (e: boolean) => {
  if (e) {
    nextTick(() => {
      var dom = document.getElementById('wap-template-parent');
      if (dom) {
        dom.scrollTo({ top: 0 });
      }
    });
    childShow.value = false;
    nextTick(() => {
      childShow.value = true;
    });
  } else {
    var dom = document.getElementById('wap-template-parent');
    if (dom) {
      dom.scrollTo({ top: 0 });
    }
  }
};
const scrollTop = () => {};
onMounted(() => {
  top(false);
  if (childModel.id === 0 || childParent.id === 0) {
    router.push({
      name: route.meta.loopType ? pathListLoop[0] : pathList[0],
      query: {},
    });
  }
});
onActivated(() => {
  // if (!route.query.current) {
  window.scrollTo({ top: 0 });
  var dom = document.getElementById('wap-template-parent');
  if (dom) {
    dom.scrollTo({ top: 0 });
  }
  // }
});
watch(
  () => childModel,
  (value) => {
    // store.childModel = store.childModel;
  },
  { deep: true },
);
</script>

<style lang="less" scoped>
.item-box {
  width: 100%;
  // height: 100%;
  min-height: 100vh;
  // overflow: auto;
  background: #f1e8d6;
}

.child-content {
  min-height: calc(100vh - 88px);

  // padding: 0px 230px;
}
.child-content-loop {
  min-height: calc(100vh - 88px);
}
.next-box {
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 88px;
  padding-top: 40px;
  padding-bottom: 24px;
}
.next-left,
.next-right {
  display: flex;
  height: 24px;
}
.next-item {
  display: flex;
  height: 24px;
  img {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }
  font-family: 'SourceHanSerifCN-Medium';
  font-size: 16px;
  color: #a2463c;
  line-height: 24px;
}
.next-left {
  .next-item {
    img {
      margin-right: 4px;
    }
  }
}
.next-right {
  img {
    margin-left: 4px;
  }
}
.item-hd {
  display: none;
}
</style>
